<template>
	<view class="health _div">
		<view class="health-wrap" v-if="healthList.length">
			<view class="health-item" v-for="(health,hIndex) in healthList" :key="hIndex">
				<view class="time">
					<image class="img" src="https://ehealth.ipd.hihonor.com/etmcstatic/blood-test.png"></image>
					<text class="text">采集时间：</text>
					<text class="BebasNeueBold text2">{{health.checkTime}}</text>
				</view>
				<view class="remark">
					<text>检测意见：</text>{{''+health.remark+''}}
				</view>
				<view class="result">
					<view style="margin-bottom:16rpx;">检测报告：如下图</view>
					<view class="img-wrap">
						<template v-for="(file,index) in health.checkFileUrlList">
							<image class="img-item" :src="file.imgUrl" :key="index"></image>
						</template>
					</view>
				</view>
			</view>
		</view>
		<view class="no-data _div" v-else>暂无数据</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				healthList: [{
					checkTime: '2025-05-01',
					remark: '身体健康，万事如意',
					checkFileUrlList: [{
						imgUrl: ''
					}, {
						imgUrl: ''
					}]
				}, {
					checkTime: '2025-05-02',
					remark: '身体健康，万事如意',
					checkFileUrlList: [{
						imgUrl: ''
					}, {
						imgUrl: ''
					}]
				}]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	page {
		background-color: #f2f3f5;
		min-height: 100%;
		min-width: 100%;
	}

	.BebasNeueBold {
		font-family: BebasNeueBold;
	}

	.health .health-wrap .health-item {
		background-color: #fff;
		border-radius: 34rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		margin: 0 26rpx 40rpx;
		padding: 16px 20rpx;
	}

	.health .health-wrap .health-item .time {
		align-items: center;
		display: flex;
		font-weight: 700;
		justify-content: left;
	}

	.health .health-wrap .health-item .time .text {
		font-size: 32rpx;
	}

	.health .health-wrap .health-item .time .text2 {
		font-size: 38rpx;
	}

	.health .health-wrap .health-item .time .img {
		height: 30rpx;
		margin-right: 18rpx;
		width: 30rpx;
	}

	.health .health-wrap .health-item .remark {
		margin: 20rpx 0;
	}

	.health .health-wrap .health-item .remark,
	.health .health-wrap .health-item .result {
		color: #757575;
		font-size: 28rpx;
		padding-left: 50rpx;
	}

	.health .health-wrap .health-item .img-wrap {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		min-height: 250rpx;
	}

	.health .health-wrap .health-item .img-wrap .img-item {
		border-radius: 10rpx;
		box-shadow: 0 0 0 8rpx #eaeaea;
		flex: 1 1 28%;
		height: 250rpx;
		margin-bottom: 10rpx;
		margin-right: 30rpx;
	}

	.health .health-wrap .health-item .img-wrap .img-item:last-child,
	.health .health-wrap .health-item .img-wrap .img-item:nth-child(3n) {
		margin-right: 0;
	}

	.health .no-data {
		color: #707b7c;
		font-size: 32rpx;
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%);
	}
</style>